<template>
  <div class="app-container">
    <div class="head_search u-f u-f-ac u-fw">
      <div class="ipt_box u-f u-f-ac u-f-jsb">
        <p class="label font14 text_black">{{ $t("名称") }}：</p>
        <el-input v-model="name" :placeholder="$t('请输入素材名称')"></el-input>
      </div>
      <div class="select_box u-f u-f-ac u-f-jsb">
        <p class="label font14 text_black">{{ $t("类型") }}：</p>
        <el-select v-model="clientVal" :placeholder="$t('请选择')" @change="clientChange">
          <el-option
            v-for="item in clientArr"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="div_box u-f u-f-ac">
        <p class="label font14 text_black">{{ $t("所属代理商") }}：</p>
        <div
          class="content font14 text_black u-f u-f-ac"
          @click="openAgentList"
        >
          <p class="text-ellipsis">{{ agent ? agent : $t("选择代理商") }}</p>
        </div>
        <button class="btn font14 text_white bg_danger" @click="clearAgent">
          {{ $t("清除") }}
        </button>
      </div>
      <button class="sub_btn font14 text_white bg_blue" @click="getData('search')">{{ $t("提交") }}</button>
    </div>

    <div class="head_options u-f u-f-ac u-fw">
      <button
        class="sub_btn font14 text_white bg_blue"
        @click="addMaterial"
        v-if="permissions.indexOf('/screenadv/addMaterial') != -1"
      >{{ $t("添加广告素材") }}</button>
    </div>

    <div>
      <el-table :data="tableData">
        <el-table-column prop="type" :label="$t('文件类型')">
          <template slot-scope="{ row }">
            <span v-if="row.type == 'image'">{{ $t("图片") }}</span>
            <span v-if="row.type == 'video'">{{ $t("视频") }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" :label="$t('名称')"></el-table-column>
        <el-table-column prop="uploader" :label="$t('上传者')"></el-table-column>
        <el-table-column prop="size" :label="$t('文件大小')"></el-table-column>
        <el-table-column prop="duration" :label="$t('视频时长')"></el-table-column>
        <el-table-column prop="created" :label="$t('创建时间')"></el-table-column>
        <el-table-column :label="$t('操作')" width="200">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="viewDetail(scope.row)">{{ $t("查看") }}</el-button>
            <el-button
              type="danger"
              size="mini"
              @click="deletes(scope.row)"
              v-if="permissions.indexOf('/screenadv/deleteMaterial') != -1"
            >{{ $t("删除") }}</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination_box">
        <el-pagination
          background
          
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-size="page_size"
          layout="total, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>

    <!-- 添加广告素材 -->
    <el-dialog
      :title="$t('添加广告素材')"
      width="900px"
      :visible.sync="showUpdate"
      :close-on-click-modal="false"
    >
      <div class="order_detail">
        <div class="ipt_list u-f u-f-ac">
          <p class="lable u-f u-f-ac">
            <span class="font14 text_black">{{$t('名称')}}：</span>
          </p>
          <el-input v-model="addFrom.name" :placeholder="$t('请输入素材名称')"></el-input>
        </div>
        <div class="radio_list u-f u-f-ac">
          <p class="lable u-f u-f-ac">
            <span class="font14 text_black">{{$t('文件类型')}}：</span>
          </p>
          <el-radio-group v-model="addFrom.file_type">
            <el-radio label="image">{{$t('图片')}}</el-radio>
            <el-radio label="video">{{$t('视频')}}</el-radio>
          </el-radio-group>
        </div>
        <div class="upload_list u-f">
          <p class="lable u-f">
            <span
              class="font14 text_black"
            >{{$t('上传')}}{{ addFrom.file_type == "image" ? $t('图片') : $t('视频') }}：</span>
          </p>
          <el-upload
           :action="action"
            :headers="{ token, ocode }"
            name="img_file"
            :data="{ type: addFrom.file_type }"
            :file-list="fileList"
            :limit="1"
            :on-exceed="handleExceed"
            :on-success="handleSuccess"
            :on-remove="handleRemove"
            :on-error="handleError"
            list-type="picture"
          >
            <el-button size="small" type="primary">{{$t('点击上传')}}</el-button>
          </el-upload>
        </div>
        <button class="update_btn font12 bg_blue text_white" @click="updateSubmit">{{$t('提交')}}</button>
      </div>
    </el-dialog>
    <!-- 查看图片 -->
    <el-dialog :title="$t('查看素材')" :visible.sync="showDetail" :close-on-click-modal="false">
      <img class="detail_img" :src="viewFrom.url" v-if="viewFrom.file_type == 'image'" />
      <video
        class="detail_video"
        :src="viewFrom.url"
        controls="controls"
        v-if="viewFrom.file_type == 'video'"
      ></video>
    </el-dialog>

    <agent-list ref="agentList" @hide="closeAgentList"></agent-list>
    <refresh @click="handleRefresh"></refresh>
  </div>
</template>

<script>
import util from "@/assets/js/util.js";
import agentList from "components/agent-list/agent-list.vue";
import { mapState } from "vuex";
export default {
  name: "screenadv-materialList",
  data() {
    let that = this;
    return {
      page: 1,
      page_size: 20,
      total: 0,
      protocol: window.location.protocol,
      name: "",
      clientVal: 0,
      clientArr: [
        {
          value: 0,
          label: that.$t("所有")
        },
        {
          value: "image",
          label: that.$t("图片")
        },
        {
          value: "video",
          label: that.$t("视频")
        }
      ],
      agent: '',
      aid: '',
      tableData: [],
      showDetail: false,
      showUpdate: false,
      addFrom: {
        name: "",
        file_type: "image",
        image_id: "",
        video_id: ""
      },
      fileList: [],
      viewFrom: {
        file_type: "image",
        url: ""
      }
    };
  },
  computed: {
    ...mapState(["token", "ocode", "permissions"]),
    action() {
      return process.env.NODE_ENV === 'production' ? `${this.protocol}//cdb.workair.vip/operate/screenadv/fileUpload` : '/screenadv/fileUpload'
    }
  },
  components: {
    agentList,
  },
  mounted() {
    this.getData();
  },
  methods: {
    handleRefresh() {
      this.page = 1
      this.page_size = 20
      this.name = ''
      this.clientVal = 0
      this.agent = "";
      this.aid = "";
      this.getData()
    },
    getData(type) {
      if(type == 'search') { this.page = 1 }
      util
        .$http("/screenadv/materialList?page=" + this.page, {
          page_size: this.page_size,
          type: this.clientVal,
          name: this.name,
          agency_id: this.aid
        })
        .then(res => {
          if (res.code == 1) {
            this.total = res.data.total;
            this.tableData = res.data.list;
          }
        });
    },
    openAgentList() {
      this.$refs.agentList.show();
    },
    closeAgentList(data) {
      this.agent = data.name;
      this.aid = data.id;
    },
    clearAgent() {
      this.agent = "";
      this.aid = "";
    },
    addMaterial() {
      this.addFrom = {
        name: "",
        file_type: "image",
        image_id: "",
        video_id: ""
      };
      this.fileList = [];
      this.showUpdate = true;
    },
    clientChange(val) {
      this.clientVal = val;
    },
    handleCurrentChange(val) {
      this.page = Number(val);
      this.getData()
    },
    viewDetail(row) {
      this.viewFrom = {
        file_type: row.type,
        url: row.file
      };
      this.showDetail = true;
    },
    handleSuccess(response,dd) {
      if (this.addFrom.file_type == "image") {
        this.addFrom.image_id = response.msg;
      } else if (this.addFrom.file_type == "video") {
        this.addFrom.video_id = response.msg;
        this.fileList = [{
          name: dd.name,
          url: 'http://xichongdian-1305183241.cosgz.myqcloud.com/screen/202312/17025381722114.png'
        }]
      }
    },
    handleRemove() {
      if (this.addFrom.file_type == "image") {
        this.addFrom.image_id = "";
      } else if (this.addFrom.file_type == "video") {
        this.addFrom.video_id = "";
      }
    },
    handleError(err) {
      this.$message({
        message: this.$t("上传失败"),
        type: "warning"
      });
    },
    handleExceed() {
      this.$message({
        message: this.$t("只能上传一张"),
        type: "warning"
      });
    },
    updateSubmit() {
      util
        .$http("/screenadv/addMaterial", {
          name: this.addFrom.name,
          type: this.addFrom.file_type,
          image: this.addFrom.image_id,
          video: this.addFrom.video_id
        })
        .then(res => {
          if (res.code == 1) {
            this.$message({
              message: res.msg,
              type: 'success'
            })
            this.addFrom = {
              name: "",
              file_type: "image",
              image_id: "",
              video_id: ""
            };
            this.fileList = [];
            this.getData();
            this.showUpdate = false;
          }
        });
    },
    deletes(row) {
      this.$confirm(this.$t("是否要删除当前素材"))
        .then(() => {
          util
            .$http("/screenadv/deleteMaterial", {
              id: row.id
            })
            .then(res => {
              if (res.code == 1) {
                this.$message({
                  message: res.msg,
                  type: "success"
                });
                this.getData();
              }
            });
        })
        .catch(() => {});
    }
  }
};
</script>

<style scoped>
.head_search {
  margin-bottom: 20px;
}
.head_search .ipt_box {
  width: 260px;
  margin-right: 20px;
}
.head_search .ipt_box .el-input {
  width: 200px;
}
.head_search .select_box {
  width: 260px;
  margin-right: 20px;
}
.head_search .select_box .el-select {
  width: 200px;
}
.head_search .switch_box {
  width: 151px;
  margin-right: 20px;
}
.head_search .div_box {
  margin-right: 20px;
}
.head_search .div_box .content {
  width: 170px;
  height: 40px;
  padding-left: 15px;
  border: 1px solid #dcdfe6;
  border-radius: 4px 0 0 4px;
  transition: border 0.3s;
  box-sizing: border-box;
}
.head_search .div_box .content:active {
  border-color: #409eff;
}
.head_search .div_box .btn {
  width: 60px;
  height: 40px;
  border: 0;
  outline: 0;
  cursor: pointer;
  border-radius: 0 4px 4px 0;
  box-sizing: border-box;
}
.head_search .sub_btn {
  width: 70px;
  height: 40px;
  border: 0;
  outline: 0;
  cursor: pointer;
  border-radius: 4px;
}
.head_tip {
  margin: 0 0 10px 0;
  padding-bottom: 5px;
  border-bottom: 1px solid #ebeef5;
}
.head_options .sub_btn {
  height: 34px;
  border: 0;
  outline: 0;
  padding: 0 15px;
  cursor: pointer;
  border-radius: 4px;
  margin-right: 20px;
}
.head_options .txt_list {
  font-weight: bold;
  margin-right: 25px;
}
.iconfont {
  font-size: 15px;
  margin-right: 5px;
}
.el-button--mini,
.el-button--mini.is-round {
  padding: 7px 10px;
}
.pagination_box {
  padding-top: 30px;
}
.pagination_box .el-pagination {
  display: flex;
  justify-content: flex-end;
}
.order_detail .ipt_list {
  margin-bottom: 20px;
}
.order_detail .ipt_list .lable {
  width: 100px;
  margin: 0;
}
.order_detail .ipt_list .el-input {
  width: 200px;
}
.order_detail .radio_list {
  margin-bottom: 20px;
}
.order_detail .radio_list .lable {
  width: 100px;
  margin: 0;
}
.order_detail .upload_list .lable {
  width: 100px;
  margin: 0;
}
.order_detail .upload_list .tip {
  cursor: pointer;
  width: 300px;
  margin: 0 0 0 15px;
}
.order_detail .update_btn {
  cursor: pointer;
  padding: 10px 20px;
  border: 0;
  outline: 0;
  border-radius: 4px;
  margin-top: 40px;
}
.detail_img {
  max-width: 900px;
  height: auto;
}
.detail_video {
  width: 600px;
  height: 350px;
}
</style>
